<template>
  <div class="page-detail">
    <el-row>
      <el-col :span="24">
        <crumbs :crumb="crumb"/>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <summa :shop="shop" :imgList="imgList"/>
      </el-col>
    </el-row>
    <el-row class="m-title">
      <el-col :span="24">
        <h3>商品列表</h3>
      </el-col>
    </el-row>

    <el-row >
      <el-col :span="24">
        <list :foodList="foodList"/>
        <!-- <div
          v-else
          class="deal-need-login">
          <img
            src="//p0.meituan.net/codeman/56a7d5abcb5ce3d90fc91195e5b5856911194.png"
            alt="登录查看">
          <span>请登录后查看详细团购优惠</span>
          <el-button
            type="primary"
            round>
            <a href="/login">立即登录</a>
          </el-button>
        </div> -->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <evaluate :comment="comment"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Crumbs from '@/components/detail/crumbs.vue';
import Summa from '@/components/detail/summary.vue'
import List from '@/components/detail/list.vue'
import Evaluate from '@/components/detail/evaluate.vue'
import * as homeApi from '@/server/home.js'
export default {
  layout: 'product',
  components:{
    Crumbs,
    Summa,
    List,
    Evaluate
  },
  data(){
    return {
      login1: true,
      shopName: '',
      shop: {},
      foodList: {
        list: null,
        total: 0
      },
      imgList: null,
      crumb:{
        shopName: '',
        category: ''
      },
      comment:{
        list: null,
        total: 0
      }
    }
  },
  methods:{
    getShopDetail: function(){
      homeApi.getShopDetail(this.shopName).then(result => {
        this.shop = result.data.data.shopInfo;
        this.foodList.list = result.data.data.foodList;
        this.foodList.total = result.data.data.foodList.length;
        this.imgList = result.data.data.imgList;
        this.crumb.shopName = this.shop.shopName;
        this.getShopComment();
      })
    },
    getShopComment: function(){
      homeApi.getShopComment(this.shop.shopId).then(result => {
        console.log(result.data.data);
        this.comment.list = result.data.data;
        this.comment.total = result.data.data.length;
        console.log(this.comment);
      })
    }
  },
  mounted() {
    this.shopName = this.$route.query.shopName;
    this.crumb.category = this.$route.query.category;
    this.getShopDetail();
  }
}
</script>

<style lang="scss">
  @import "@/assets/css/detail/index.scss";
</style>
